<template>
    <div class="dataScreenBarChart">
        <el-scrollbar style="height:350px;">
            <div ref="sceneDataBar" style="width:100%;height:470px;margin-top: -15px;"></div>
        </el-scrollbar>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importSceneBarData, importSceneQueryData } from '../../../homePage/components/listPage/dataAccess/api/echartsChatApi'
import { sceneScreenBarOption } from '../../../../utils/js/point'
export default {
    data() {
        return {
            allData: [],
            xAxisData: null,
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async chartRender(params) {
            if (params == '全部') {
                this.getData();
            } else {
                const res = await importSceneQueryData(params)
                this.allData = res.data.data;
                this.initChart();
            }
        },
        async getData() {
            const res = await importSceneBarData()
            this.allData = res.data.data;
            this.initChart();
        },
        initChart() {
            var xAxisData = this.allData.map(item => {return item.scenario_id})
            var subcategoryNum = this.allData.map(item => {return item.subcategory_number})
            var colorList = []
            this.allData.forEach(item => {
                if (item.main_scene === '城市') {
                    colorList.push('#0E4CFF')
                } else if (item.main_scene === '高速') {
                    colorList.push('#07AB68')
                } else {
                    colorList.push('#FFC617')
                }
            })

            var myChart = echarts.init(this.$refs.sceneDataBar);
            sceneScreenBarOption.yAxis.data = xAxisData;
            sceneScreenBarOption.series[0].data = subcategoryNum;
            sceneScreenBarOption.series[1].data = subcategoryNum;
            var newColor = function color(params) {
                return colorList[params.dataIndex]
            }
            sceneScreenBarOption.series[1].itemStyle.normal.color = newColor;
            myChart.setOption(sceneScreenBarOption);
             // echart图表自适应
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
}
</script>

<style lang="less">
.dataScreenBarChart {
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
    .is-horizontal {
        display: none;
    }
}

</style>